<template>
  <el-container>
    <el-header>
      <div class="flex">
        <div>系统日志</div>
        <div class="margin-left-sm" />
      </div>
      <div class="flex end" />
    </el-header>
    <el-main class="main-full-height">
      <el-table
        :data="tableData"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="序号" type="index" :index="indexMethod" width="70px" align="center" />
        <el-table-column label="访问时间" prop="CreateTime" />
        <el-table-column label="操作人" prop="Operator" />
        <el-table-column label="操作类型" prop="Type" />
        <el-table-column label="操作内容" prop="Content" />
        <template slot="empty">
          <HelpTips />
        </template>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
        :current-page="queryList.PageIndex"
        :page-size="queryList.PageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount"
        @current-change="handleCurrentChange"
      />
    </el-footer>
  </el-container>
</template>
<script>
import { getSysLogData } from '@/api/syslog/syslog'
export default {
  data() {
    return {
      tableData: [],
      // 查询参数
      totalCount: 0,
      queryList: {
        PageIndex: 1,
        PageSize: 20,
        SearchKey: ''
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    indexMethod(index) {
      var pageIndex =
        this.queryList.PageIndex <= 1 ? 0 : this.queryList.PageIndex - 1
      return pageIndex * 20 + index + 1
    },
    getData() {
      getSysLogData(this.queryList).then(res => {
        this.tableData = res.Data
        this.totalCount = res.TotalItemCount
      })
    },
    handleCurrentChange(index) {
      this.queryList.PageIndex = index
      this.getData()
    }
  }
}
</script>
